import headerCss from './BaseHeader.module.css'
import { useState, useEffect, Children } from 'react'
import { Button, Checkbox, Form, Input, Space, Avatar, Dropdown, Watermark, Breadcrumb, Badge, Popover } from 'antd';
import { Navigate, Outlet, useLocation, useNavigate, NavLink } from 'react-router-dom'
import { UserOutlined, CaretDownFilled, CheckCircleTwoTone, HeartTwoTone, SmileTwoTone } from '@ant-design/icons';
import { useSelector, useDispatch } from 'react-redux'
import { message } from 'antd';
const BaseHeader = ({ children }) => {
    const [breaddum, setBreadDum] = useState([])
    const [count, useCount] = useState(0)
    const locations = useLocation()
    const navigate = useNavigate()
    const logOut = () => {
        localStorage.removeItem('accessToken')
        message.destroy()
        message.warning('已退出登录，请重新登录', 2)
        setTimeout(() => {
            navigate(`/login`, {
                replace: true // 替换历史记录
            });
        }, 2000)
    }
    const items = [{
        label: '退出',
        key: '1'
    }]
    const handleMenuClick = (e) => {
        if (e.key === '1') {
            logOut()
        }
    }
    // 使用state中的数据
    const initName = useSelector((state) => state.home.initName)
    const isFullScreen = useSelector((state) => state.home.isFullScreen)
    console.log('headers', locations.pathname)
    useEffect(() => {
        const arr1 = locations.pathname.split('/').map(item => {
            return { title: <span onClick={() => console.log(item)}>{item}</span> }
        })
        arr1.shift()
        console.log('arr1', arr1)
        setBreadDum(arr1)
    }, [locations.pathname])
    const text = <HeartTwoTone twoToneColor="#eb2f96" />
    return (
        <div className={headerCss.headers}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>系统头部
                <Breadcrumb
                    style={{ marginLeft: '20px' }}
                    items={breaddum}
                />

            </div>
            {children}
            {
                localStorage.getItem('accessToken') ?
                    <div style={{
                        height: '48px',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        backgroundColor: '#85928b',
                        opacity: '0.6',
                        padding: '10px',
                        borderRadius: '22px'
                    }}> <Popover trigger="hover" placement="bottomRight" title={text} content={count > 0 ? '你有新的消息来咯' : '没有新消息哦'}><Badge count={count} showZero size='small'> <Avatar icon={<UserOutlined />} /></Badge></Popover><p style={{ margin: '0 10px', maxWidth: '200px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{localStorage.getItem('accessToken')}|{initName}|{isFullScreen}</p>
                        <Dropdown
                            menu={{
                                items,
                                onClick: handleMenuClick,
                            }}
                            trigger={['click']}
                        >
                            <a onClick={(e) => e.preventDefault()}>
                                <Space>
                                    <CaretDownFilled style={{ color: '#fff' }} />
                                </Space>
                            </a>
                        </Dropdown>
                    </div> : <div><Button type="primary" onClick={() => {
                        navigate('/login')
                    }}>登录</Button><Button type="primary" onClick={() => {
                        navigate('/login')
                    }}>注册</Button></div>
            }
        </div>
    )
}
export default BaseHeader